<template>
  <div>
    <input type="text" v-model="search" />
    <ul>
      <li v-for="(item, index) in result" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
import jsonp from "jsonp";
export default {
  name: "Index",
  watch: {
    search(val) {
      //判断val是否为空
      if (val) {
        //请求接口--跨域
        var url = "http://suggestion.baidu.com/su?wd=";
        // 打断点调试 debugger
        jsonp(`${url}${this.search}`, { param: "cb" }, (err, data) => {
          if (err) {
            alert("接口请求错误!");
          } else {
            // console.log(data);
            // 赋值
            this.result = data.s;
          }
        });
      }
    },
  },
  data() {
    return {
      //搜索
      search: "",
      //结果
      result: [],
    };
  },
};
</script>

<style>
</style>